<template>
    <el-popover
      v-model="visible"
      placement="left"
      title="选择/输入节点数据"
      width="360"
      trigger="manual"
      popper-class="node-view-data node-view-data-popover"
      v-click-outside="closeOver">
        <div class="node-view-data-row" slot="reference" @click="handleTrigger">
            <el-input
              v-model="nvValue"
              size="mini"
              :placeholder="placeholder"
              clearable
            />
        </div>
        <data-tree-node-panel
          v-model="nvValue"
          v-if="visible"
          v-bind="$attrs"
          @select="handleSelect"
        />
    </el-popover>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import DataTreeNodePanel from './data-tree-node-panel.vue'

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '选择/自定义 数据路径'
  },
  value: {
    type: String,
    default: ''
  }
})

// 定义 emits
const emit = defineEmits(['change', 'select'])

// 状态
const nvValue = ref('')
const visible = ref(false)

// 生命周期钩子
onMounted(() => {
  nvValue.value = props.value
})

// Watchers
watch(
  () => props.value,
  (newVal) => {
    nvValue.value = newVal
  }
)

watch(nvValue, (val) => {
  emit('change', val)
})

// 方法实现
const handleTrigger = () => {
  visible.value = !visible.value
}

const closeOver = () => {
  visible.value = false
}

const handleSelect = (val) => {
  emit('select', val)
}
</script>
